<template>
  <el-card>
    <el-table border :data="skuList">
      <el-table-column label="序号" type="index" />
      <el-table-column label="名称" prop="skuName" />
      <el-table-column label="描述" prop="skuDesc" />
      <el-table-column label="默认图片">
        <template v-slot="{ row }">
          <el-image style="width: 100px; height: 100px" :src="row.skuDefaultImg" fit="fill" />
        </template>
      </el-table-column>
      <el-table-column label="重量(kg)" prop="weight" />
      <el-table-column label="价格(元)" prop="price" />
      <el-table-column label="操作">
        <template v-slot="{ row, $index }">
          <el-tooltip content="上架" placement="top" v-if="row.isSale === 1">
            <el-button type="success" :icon="Top" size="small" @click="skuOnSale(row, $index)"></el-button>
          </el-tooltip>
          <el-tooltip content="下架" placement="top" v-if="row.isSale === 0">
            <el-button type="info" :icon="Bottom" size="small" @click="skuCancleSale(row, $index)"></el-button>
          </el-tooltip>
          <el-tooltip content="修改SKU" placement="top">
            <el-button type="primary" :icon="Edit" size="small"></el-button>
          </el-tooltip>
          <el-tooltip content="查看SKU列表" placement="top">
            <el-button type="info" :icon="InfoFilled" size="small" @click="toCheckSkuInfo(row.id)"></el-button>
          </el-tooltip>
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" :icon="InfoFilled" icon-color="#626AEF"
            title="真的确定要删除此条数据么?" @confirm="deleteSpuInfo(row.id)">
            <template #reference>
              <el-button type="danger" size="small" title="删除" :icon="Delete"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 20]"
      :small="small" :disabled="disabled" :background="background" layout="prev, pager, next, jumper,->,sizes,total"
      :total="total" @size-change="handleSizeChange" @current-change="handleCurrentChange" style="margin-top:20px" />

    <!-- 抽屉 -->
    <el-drawer v-model="drawer" size="45%" :title="skuInfo.skuName" :direction="direction">
      <el-row :gutter="20">
        <el-col :span="5">名称</el-col>
        <el-col :span="15">{{ skuInfo.skuName }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">描述</el-col>
        <el-col :span="15">{{ skuInfo.skuDesc }}</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">价格</el-col>
        <el-col :span="15">{{ skuInfo.price }}.00</el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">平台属性</el-col>
        <el-col :span="15">
          <el-tag v-for="attrValue in skuInfo.skuAttrValueList" :key="attrValue.id" style="margin-right:6px">{{
            attrValue.attrName }}-{{ attrValue.valueName }}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">销售属性</el-col>
        <el-col :span="15">
          <el-tag v-for="saleAttr in skuInfo.skuSaleAttrValueList" :key="saleAttr.id" style="margin-right:6px">{{
            saleAttr.saleAttrName }}-{{ saleAttr.saleAttrValueName }}</el-tag>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="5">商品图片</el-col>
        <el-col :span="15">
          <el-carousel indicator-position="outside">
            <el-carousel-item v-for="skuImg in skuInfo.skuImageList" :key="skuImg.id">
              <el-image :src="skuImg.imgUrl" style="width:100%"></el-image>
            </el-carousel-item>
          </el-carousel>
        </el-col>
      </el-row>
    </el-drawer>
  </el-card>
</template>
  
<script lang="ts">
export default {};
</script>
  
<!-- 0是下架状态  1是上架状态 -->
<script lang="ts" setup>
import { Plus, Edit, Delete, InfoFilled, Top, Bottom } from '@element-plus/icons-vue';
import { onMounted, ref } from 'vue'
import { reqGetAllSkuList, reqSkuCancleSale, reqSkuOnSale, reqDeleteSku, reqGetOneSkuInfo } from '@/api/product/sku';
import { ElMessage } from 'element-plus';
const currentPage = ref(1); //当前页
const pageSize = ref(3); //每页显示条数值
const small = ref(false); //是否使用小型分页样式
const background = ref(false); //是否为分页按钮添加背景色
const disabled = ref(false); //是否禁用分页
const total = ref(0); //数据的总条数
const skuList = ref([])//sku列表信息
const skuInfo = ref({}) //一条sku信息
const drawer = ref(false)//控制抽屉显示
const direction = ref('rtl');//抽屉弹出方向

onMounted(() => {
  getSkuList()
})

const getSkuList = async () => {
  const result = await reqGetAllSkuList(currentPage.value, pageSize.value)
  skuList.value = result.records
  total.value = result.total
  // console.log(result)

}

//当前页面的显示数量发生变化时
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  currentPage.value = 1;
  getSkuList()
};

//当前页发生变化时
const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  getSkuList()
};

//上架
const skuOnSale = async (row, index) => {
  // console.log(row.isSale)
  await reqSkuOnSale(row.id)
  skuList.value[index].isSale = 0
  ElMessage.success('上架成功..')
}
//下架
const skuCancleSale = async (row, index) => {
  await reqSkuCancleSale(row.id)
  skuList.value[index].isSale = 1
  ElMessage.success('下架成功..')
}

//删除sku
const deleteSpuInfo = async (id: number) => {
  await reqDeleteSku(id)
  ElMessage.success('删除sku成功..')
  getSkuList()
}

//查看skuInfo
const toCheckSkuInfo = async (id: number) => {
  //获取一条sku详情数据
  const result = await reqGetOneSkuInfo(id)
  // console.log(result)
  //触发抽屉效果
  drawer.value = true
  //给skuInfo赋值
  Object.assign(skuInfo.value, result)
  // console.log(skuInfo)
}
</script>
  
<style></style>